<template>
    <div class="second_level_page recharge_page">
        <input v-model="money" ref="moneyref" readonly type="text" placeholder="请输入充值金额">
        <div @click="recharge" class="submit_btn">提交</div>
        <footer>
            <ul class="pay_btn">
            <li click="">1</li>
            <li click="">2</li>
            <li click="">3</li>
            <li click="">4</li>
            <li click="">5</li>
            <li click="">6</li>
            <li click="">7</li>
            <li click="">8</li>
            <li click="">9</li>
            <li click="">.</li>
            <li click="">0</li>
            <li class="b9" click="">删除</li>
            </ul>
        </footer>
        <alert-tip v-if="showAlert" @closeTip="showAlert = false;" :alertText="alertText"></alert-tip>

        <transition name="loading">
            <loading v-if="showLoading"></loading>
        </transition>

        <transition name="router-slid" mode="out-in">
            <router-view></router-view>
        </transition>
    </div>
</template>

<script>
import {mapState} from 'vuex'
import alertTip from 'src/components/common/alertTip'
import {createSellerRechargeOrder,getRechargePayDate,getJsConfig,getRechargeOrderState} from 'src/service/getData'
import wx from 'weixin-js-sdk'
import {baseUrl} from 'src/config/env'
import {fmoney} from 'src/config/mUtils'
import loading from 'src/components/common/loading'

export default {
    data(){
        return{
            alertText: '',
            showAlert: false,
            showLoading: false, //显示加载动画
        }
    },
    mounted(){
        
    },
    computed:{
        ...mapState([
            'userInfo',
        ]),
    },
    components:{
        alertTip,
        loading,
    },
    methods:{
        
    },
    watch:{

    }
}

</script>

<style lang="scss" scoped>
    @import 'src/style/mixin';

    .recharge_page{
        background: #fff;
        input{
            @include wh(80%, 1.28rem);
            margin: 0 auto;
            display: block;
            text-align: center;
            padding: .39rem 0;
            line-height: .5rem;
            @include sc(.32rem, #333);
            background: #fff;
        }
        .submit_btn{
            margin: .42rem .26rem;
            height: .88rem;
            line-height: .88rem;
            text-align:center;
            background: $orange;
            border-radius: .1rem;
            @include sc(.34rem, #fff);
        }
        footer {
            position: absolute;
            bottom: 0;
            width: 100%;
            font-weight: 600;
            .pay_btn {
                li {
                    width: 33.3333%;
                    float: left;
                    height: 1rem;
                    line-height: 1rem;
                    text-align: center;
                    background: #f4f4f4;
                    font-size: .48rem;
                    border-right: 1px solid #ddd;
                    border-bottom: 1px solid #ddd;
                }
                li:active {
                    background: #C2C2C2;
                }
                .b9:active {
                    background: #fff !important;
                }
                .b9 {
                    background: #C2C2C2 !important;
                }
            }
        }    
    }    
</style>
